<template>
	<el-card shadow="never">
		<el-form
            :inline="true"
            :model="state.queryForm"
            @keyup.enter="onSearch()">
			<el-form-item>
				<el-input
                    v-model="state.queryForm.paramKey"
                    placeholder="参数键">
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-input
                    v-model="state.queryForm.paramValue"
                    placeholder="参数值">
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-select
                    v-model="state.queryForm.paramType"
                    placeholder="系统参数"
                    style="width: 100px;"
                    clearable>
                    <el-option label="否" value="0"></el-option>
                    <el-option label="是" value="1"></el-option>
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSearch()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onHandle()"> 新增 </el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch()"> 删除 </el-button>
			</el-form-item>
		</el-form>
		<el-table
            v-loading="state.loading"
            :data="state.dataList"
            style="width: 100%"
            border
            @selection-change="selectionIds">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="paramName" label="参数名称" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="paramKey" label="参数键" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="paramValue" label="参数值" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="paramType" label="系统参数" align="center">
                <template #default="scope">
                    {{ scope.row.paramType === '0' ? '否' : '是' }} 
                </template>
            </el-table-column>
			<el-table-column prop="remark" label="备注" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" link @click="onHandle(scope.row.id)">修改 </el-button>
					<el-button type="primary" link @click="deleteBatch(scope.row.id)">删除 </el-button>
				</template>
			</el-table-column>
		</el-table>

        <div style="margin-top: 20px;">
            <el-pagination
                layout="prev, pager, next"
                v-model:current-page="pagination.page"
                :page-size="pagination.limit"
                :total="pagination.total"
                @current-change="onPageChange"
                background>
            </el-pagination>
        </div>

		<!-- 弹窗, 新增 / 修改 -->
		<ParamDlg ref="paramDlgRef" @refresh="getDataList" />
	</el-card>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { paramStore } from '@/store/param'
import { ElMessage, ElMessageBox } from 'element-plus'
import ParamDlg from './param_dlg.vue'

const useParamStore = paramStore() // 直接从store获取数据

const state = reactive({
	loading: false, // 加载中
	dataList: [], // 列表数据
	queryForm: { // 查询表单
		paramKey: '', // 参数键
		paramValue: '', // 参数值
		paramType: '', // 是否为系统参数
	},
})
const pagination = reactive({ // 分页信息
	page: 1, // 当前页码
	limit: 10, // 每页条数
	total: 0, // 总条数
})

onMounted(() => { // 页面加载完成
	getDataList() // 获取列表数据
})

// 获取列表数据
const getDataList = () => {
	state.loading = true // 显示加载中
	useParamStore.getParamPage({
		...state.queryForm, // 查询表单
		page: pagination.page, // 当前页码
		limit: pagination.limit, // 每页条数
	}).then(() => {
			state.dataList = useParamStore.paramList // 列表数据
			pagination.total = useParamStore.pagination.total // 总条数	
		})
		.finally(() => {
			state.loading = false // 隐藏加载中
		})
}

const onSearch = () => { // 查询
	pagination.page = 1 // 重置到第一页
	getDataList() // 获取列表数据
}

const keyIds = ref([]) // 选中的id数组
const selectionIds = (val) => { // 选中的id数组
	keyIds.value = val.map((item) => item.id) // 选中的id数组
    console.log(keyIds.value) // 打印选中的id数组
}

// 分页
const onPageChange = (val) => { // 分页
	pagination.page = val // 当前页码
	onSearch() // 获取列表数据
}

const paramDlgRef = ref(null) // 新增/修改组件的引用
const onHandle = (id) => {
	if (id) { 
		paramDlgRef.value.init(id) // 修改模式
	} else { 
		paramDlgRef.value.init() // 新增模式
	}
}

const deleteBatch = async(key) => {
    const ids = key ? [key] : keyIds.value
    if (ids.length === 0) {
      ElMessage.warning('请选择删除记录')
      return
    }

    try {
        const confirm = await ElMessageBox.confirm('确定进行删除操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        if (confirm === 'confirm') {
            console.log('删除参数ID:', ids)
            await useParamStore.deleteParam(ids)
            ElMessage.success('删除成功')
            await getDataList() // 刷新列表
        }
    } catch (error) {
        if(error !== 'cancel') { // 不是用户取消的情况
            ElMessage.error(error.message || '删除失败')
        }
    }
}

</script>

<style lang="scss" scoped>

</style>